<template>
  <div class="add-good-container">
    <el-card class="add-good-card">
      <h2>添加货物</h2>
      <el-form
        ref="goodForm"
        :model="good"
        :rules="rules"
        label-width="80px"
        label-position="top"
        @submit.prevent="handleSubmit"
      >
        <el-form-item label="名称" prop="goods_name" required>
          <el-input v-model="good.goods_name" placeholder="请输入货物名称" required></el-input>
        </el-form-item>
        <el-form-item label="数量" prop="total_inventory" required>
          <el-input-number v-model="good.total_inventory" :min="1" required></el-input-number>
        </el-form-item>
        <el-form-item label="单位" prop="unit" required>
          <el-input v-model="good.unit" placeholder="请输入单位" required></el-input>
        </el-form-item>
        <el-form-item label="单价" prop="price" required>
          <el-input-number v-model="good.price" :min="0.01" step="0.01" placeholder="请输入单价" required></el-input-number>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" native-type="submit">提交</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
import { createGood } from '@/api/goods';

export default {
  setup() {
    const router = useRouter();
    const good = ref({ goods_name: '', total_inventory: null, unit: '', price: null, on_shelves: false, });
    const goodForm = ref(null);

    const rules = {
      goods_name: [
        { required: true, message: '请输入货物名称', trigger: 'blur' },
        { max: 100, message: '名称最多100个字符', trigger: 'blur' },
      ],
      total_inventory: [
        { required: true, message: '请输入货物数量', trigger: 'blur' },
        { type: 'number', min: 1, message: '数量必须为正整数', trigger: 'blur' },
      ],
      unit: [
        { required: true, message: '请输入单位', trigger: 'blur' },
      ],
      price: [
        { required: true, message: '请输入单价', trigger: 'blur' },
        { type: 'number', min: 0.01, message: '单价必须为正数', trigger: 'blur' },
      ],
    };

    const handleSubmit = async () => {
      if (goodForm.value) {
         await goodForm.value.validate(async (valid) => {
           if (valid) {
              try {
                await createGood(good.value);  // 调用后端接口
                ElMessage.success('货物添加成功！');
                router.push('/goods');  // 跳转到货物列表页面
              } catch (error) {
                console.error("Error creating good:", error);
                ElMessage.error(error.response?.data?.message || '添加货物失败，请稍候重试。');
              }
            } else {
              ElMessage.error('表单填写有误，请检查后再试。');
            }
          });
        }
      };

    return {
      good,
      rules,
      handleSubmit,
      goodForm,
    };
  },
};
</script>

<style scoped>
.add-good-container {
  display: flex;
  justify-content: center;
  padding: 20px;
}

.add-good-card {
  width: 100%;
  max-width: 500px;
  padding: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  background-color: #fff;
}

h2 {
  text-align: center;
  margin-bottom: 20px;
  font-size: 24px;
  color: #333;
}

.el-form-item {
  margin-bottom: 20px;
}

.el-button {
  width: 100%;
}
</style>